<template>
    <div class="activity-record">
        <div class="order-tap">
            <order-tap :bannerProps="orderTap" @tapItem="tapOrderType" v-if="Object.keys(orderTap).length > 0"></order-tap>
        </div>
        <scroller ref="myscroller"
                  :on-refresh="refresh"
                  :on-infinite="infinite">
            <div class="activity-record">
                <goods-box :goodsBoxsProp="goodsBoxs" v-if="goodsBoxs && goodsBoxs.list.length > 0"></goods-box>
            </div>
        </scroller>
    </div>
</template>

<script>
    import GoodsBox from '../../components/commonComponents/boxItem/GoodsBox';
    export default {
        name: "ActivityRecord",
        props:{
            activityRecordProp:Object,
        },
        data(){
            return{
                activityRecord:{

                },
                goodsBoxs:{
                    id:0,//用于区分多个goodsBox组件
                    title:"",/*@title goodsBoxs 标题*/
                    // titleInfo:{
                    //     type:"oneLine",
                    //     leftText:"oneLine",
                    //     rightText:"oneLine",
                    // },/*@title goodsBoxs 标题*/
                    isShowMore:false,/*@isShowMore 是否显示查看更多*/
                    list:[/*@list boxitem的列表个数*/
                        // {
                        //     storeId:0,
                        //     id:0,//用于区分多个goodsBox组件
                        //     type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                        //     itemId:0,//商品id
                        //     currency:"￥",/*金币的符号*/
                        //     url:'',/*@url 图片或者视频的url*/
                        //     itemTitle:'',/*@description 描述*/
                        //     price:'',/*@description 价格*/
                        //     buyerNum:'',/*@buyerNum 已购买件数*/
                        //     time:0,/*@time时间，当type为2时填写*/
                        //     remark:{text:'NO.1',backgroundColor:''},
                        //     userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                        // },
                    ],
                },
                orderTap:{
                    list:[],
                },
            }
        },
        mounted(){
            this.activityRecord = Object.assign({},this.activityRecord,this.activityRecordProp);
            // this.$root.$emit('toast', {msg: '正在筹划中'});
            // this.init();
            let isInit = true;
            this.initTap(isInit);
        },
        methods:{
            init(obj){
                let that = this;
                // let url = `${this.NW_API_API_LOCALE_VERSION}/promotion/${this.userId}/activity/type/had/joined`;
                let pageNum = 1;
                let queryMsg = {
                    actType:obj.actType,
                    subActType:obj.subActType,
                    pageSize:10,
                    pageNum:pageNum,
                };
                that.goodsBoxs.list = [];
                let url = `${this.NW_API_API_LOCALE_VERSION}/promotion/${this.userId}/activity/had/joined`;
                let temp = {};
                this.xurl.get(url,queryMsg).then((data)=>{
                    if(data.success){
                        if(data && data.list && data.list.length > 0){
                            data.list.forEach((value,index)=>{
                                /*
                                * "actType": 5,
                                "subActType": 5,
                                "actTypeName": "互动活动",
                                "subActTypeName": "估价"*/
                                temp = {
                                    storeId:0,
                                    id:value.actId,//用于区分多个goodsBox组件
                                    type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                                    itemId:value.promotionId,//商品id
                                    currency:"￥",/*金币的符号*/
                                    url:value.poster,/*@url 图片或者视频的url*/
                                    itemTitle:'',/*@description 描述*/
                                    price:'',/*@description 价格*/
                                    buyerNum:`#${value.title}#`,/*@buyerNum 已购买件数*/
                                    time:0,/*@time时间，当type为2时填写*/
                                    remark:{text:value.subActTypeName},
                                    userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                                };
                                that.goodsBoxs.list.push(temp)
                            })
                        }
                    }
                });
            },
            tapOrderType(obj) {
                let pageNum = 1;
                // this.nowShowItem = obj.id;
                if(obj && obj.msg ){
                    this.init(obj.msg);
                }
            },
            initTap(isInit) {
                let that = this;
                /*${this.userId}*/
                let url = `${this.NW_API_API_LOCALE_VERSION}/promotion/${this.userId}/activity/type/had/joined`;
                let tempObj = {};
                this.xurl.get(url).then((data)=>{
                    if(data.success){
                        if(data.list && data.list.length > 0){
                            data.list.forEach((value,index)=>{
                                tempObj = {
                                    id: index,
                                    name: value.subActTypeName,
                                    default: true,
                                    num:0,
                                    msg:value,
                                }
                                that.orderTap.list.push(tempObj);
                            });
                            if(isInit && that.orderTap && that.orderTap.list && that.orderTap.list.length > 0){
                                this.init(that.orderTap.list[0].msg);
                            }
                        }
                    }else if(data.errMsg){
                        console.log(data.errMsg);
                    }else{
                        console.log('获取页面信息失败')
                    }
                });
                this.orderTap = Object.assign({}, this.orderTap, {
                    showNum: false,
                })
            },
            refresh(){
                setTimeout(()=>{
                    this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
            infinite(){
                this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                setTimeout(()=>{
                    this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
        },
        watch:{
            activityRecordProp(val){
                this.activityRecord = Object.assign({},this.activityRecord,val);
            }
        },
        components:{
            'goods-box':GoodsBox,
            'order-tap': () => import('../../../src/components/commonComponents/tap/Banner'),
        }
    }
</script>

<style scoped lang="scss">
    .activity-record{
        padding-top: .4rem;
    }
    .activity-record /deep/{
        .remark{
            background-color: #F5C945!important;
            padding: 0 .05rem;
        }
        .card-tab{
            border-bottom: 1px solid #E6E9F0;
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 10;
        }
        .active.tab-item{
            border-bottom: none;
        }
        .buy-show{
            padding: .12rem;
        }
        .buy-item-wrap{
            margin-bottom: .12rem;
        }
    }
    .order-tap{
        height: .4rem;
    }
</style>